<template>
	<view class="container">
		<!-- 账号密码登录 -->
		<template v-if="loginType=='pwd'">
			<view class="page-title">账号密码登录</view>
			<view class="form-content">
				<u--input v-model.trim="form.account" clearable placeholder="请输入登录手机号" shape="circle" border="none"
					fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx'}"></u--input>

				<template v-if="inputPasswordType">
					<u-input v-model.trim="form.password" clearable type="password" placeholder="请输入登录密码" shape="circle"
						border="none" fontSize="32rpx"
						:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
						<template slot="suffix">
							<view @click="changeInputType">
								<image src="/static/login/icon-eye-close.png" class="icon-eye"></image>
							</view>
						</template>
					</u-input>
				</template>

				<template v-else>
					<u-input v-model.trim="form.password" clearable type="text" placeholder="请输入登录密码" shape="circle"
						border="none" fontSize="32rpx"
						:customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}">
						<template slot="suffix">
							<view @click="changeInputType">
								<image src="/static/login/icon-eye-open.png" class="icon-eye"></image>
							</view>
						</template>
					</u-input>
				</template>



				<view class="agreement-text">
					登录即代表同意
					<span class="link" @click="goPage('/pages/webview/index?type=yhxy&title=用户协议')">用户协议</span>及
					<span class="link" @click="goPage('/pages/webview/index?type=yszc&title=隐私政策')">隐私政策</span>
				</view>

				<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle"
					:disabled="!(form.account&&form.password)" @click="btnPasswordLogin">确认登录</u-button>

				<view class="f-c-between register-text">
					<text @click.stop="goPage('/pages/login/register')">注册账号</text>
					<text @click.stop="goPage('/pages/login/forget')">忘记密码？</text>
				</view>
			</view>

			<view class="other-login" @click="changeLoginType('code')">
				<view class="other-title">验证码登录</view>
				<image src="/static/login/login-code.png" class="img-login"></image>
			</view>
		</template>

		<!-- 验证码登录 -->
		<template v-if="loginType=='code'">
			<view class="page-title">验证码登录</view>
			<view class="form-content">
				<u-input v-model.trim="form.mobile" clearable placeholder="请输入登录手机号" shape="circle" border="none"
					fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx'}">
					<template slot="suffix">
						<view class="code-text" :class="[form.mobile.trim()?'hasTime':'']" @tap="getPhoneCode">
							{{countdownTime>0?countdownTime+'S':'获取验证码'}}
						</view>
					</template>
				</u-input>

				<u--input v-model.trim="form.captcha" clearable placeholder="短信验证码" shape="circle" border="none"
					fontSize="32rpx" :customStyle="{background:'#F4F4F4',padding:'14rpx 30rpx',marginTop:'26rpx'}"></u--input>

				<u-button shape="circle" color="#FFC046" :customStyle="customButtonStyle"
					:disabled="!(form.mobile&&form.captcha)" @click="btnCodeLogin">立即登录</u-button>
			</view>
			<view class="other-login" @click="changeLoginType('pwd')">
				<view class="other-title">密码登录</view>
				<image src="/static/login/login-pwd.png" class="img-login"></image>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputPasswordType: true,
				loginType: 'pwd', //登录方式
				form: {
					account: '',
					password: '',
					mobile: '',
					captcha: ''
				},
				// 倒计时秒数
				countdownTime: 0,
				intervalId: null,
				customButtonStyle: {
					width: '100%',
					height: '76rpx',
					fontSize: '32rpx',
					color: '#FFFFFF',
					marginTop: '36rpx',
				}
			}
		},
		methods: {
			//切换登录方式
			changeLoginType(type) {
				this.loginType = type
			},
			//切换密码输入框类型
			changeInputType() {
				this.inputPasswordType = !this.inputPasswordType
			},

			// 获取短信验证码
			getPhoneCode() {
				if (!this.form.mobile.trim()) {
					return
				}
				// 检查是否60秒内已经请求过
				if (this.countdownTime > 0) {
					return;
				}
				if (!this.$util.businessUtil.checkPhoneBool(this.form.mobile)) {
					return
				}
				this.$api.gate_sms_send({
					mobile: this.form.mobile,
					event: 'login'
				}).then(res => {
					// 发送验证码
					uni.showToast({
						title: "验证码已发送",
						icon: "none",
						duration: 2000
					})
					// 倒计时60秒
					this.countdownTime = 60
					this.intervalId = setInterval(() => {
						if (this.countdownTime <= 0) {
							clearInterval(this.intervalId)
						}
						this.countdownTime -= 1;
					}, 1000)
				})
			},

			//账号密码登录
			btnPasswordLogin() {
				this.$store.dispatch('password_login', {
					account: this.form.account,
					password: this.form.password
				}).then(res => {
					this.handleLoginBack(res)
				})
			},

			//验证码登录
			btnCodeLogin() {
				if (!this.$util.businessUtil.checkPhoneBool(this.form.mobile)) {
					return
				}
				this.$store.dispatch('mobileCode_login', {
					mobile: this.form.mobile,
					captcha: this.form.captcha
				}).then(res => {

					this.handleLoginBack(res)
				})
			},

			//登录之后的操作
			handleLoginBack(res) {
				this.$store.commit('SET_token', res.userinfo.token)
				// #ifdef MP-WEIXIN
				if (res.userinfo && !res.userinfo.openid) {
					this.$store.dispatch('get_wechatCode').then(data => {
						let info = {
							...res.userinfo,
							openid: data.openid
						}
						this.$store.dispatch('handle_login_after_thing', info)
						uni.switchTab({
							url: '/pages/home/index'
						})
					}).catch(err => {
						this.$store.commit('SET_token', '')
					})
				} else {
					this.$store.dispatch('handle_login_after_thing', res.userinfo)
					uni.switchTab({
						url: '/pages/home/index'
					})
				}
				// #endif

				// #ifdef APP
				if (res.userinfo && !res.userinfo.app_openid) {
					this.$store.dispatch('get_wechatCode').then(data => {
						let info = {
							...res.userinfo,
							app_openid: data.app_openid
						}
						this.$store.dispatch('handle_login_after_thing', info)
						uni.switchTab({
							url: '/pages/home/index'
						})
					}).catch(err => {
						this.$store.commit('SET_token', '')
					})
				} else {
					this.$store.dispatch('handle_login_after_thing', res.userinfo)
					uni.switchTab({
						url: '/pages/home/index'
					})
				}
				// #endif

				// #ifdef H5
				this.$store.dispatch('handle_login_after_thing', res.userinfo)
				uni.switchTab({
					url: '/pages/home/index'
				})
				// #endif
			},

			//跳转页面
			goPage(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss"
</style>